<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <!-- <script src="../js/vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul li {
        list-style: none;
    }

    .freeList,
    .discountList,
    .boutiqueList {
        width: 1200px;
        margin: auto;
    }

    h2 {
        text-align: center;
    }

    .title {
        margin: auto;
        width: 1200px;
        padding: 0 12px 10px 62px;
        border-bottom: 2px solid #e8e8e8;


    }

    /* 免费 */
    .freeList {
        overflow: hidden;
    }

    .freeList>li {
        float: left;
        padding: 8px;
        /* width: 240px;
height: 243px; */
    }

    .freeList>li:hover {
        cursor: pointer;
    }

    .freeList>li:hover>p:nth-of-type(1) {
        color: #00cf8c;

    }

    .freeList>li div {
        overflow: hidden;
        width: 224px;
        height: 135px;
    }

    .freeList>li div img {
        position: relative;
        width: 100%;
        height: 100%;
        transition: 1s;

    }

    .freeList>li div img:hover {
        transform: scale(1.2, 1.2);
    }

    .freeList>li>p:nth-of-type(1) {
        width: 200px;
        padding-top: 10px;
        font-weight: 500;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .freeList>li>p:nth-of-type(2) {
        color: #888;
        font-weight: 500;
    }

    .freeList>li>span {
        color: #00cf8c;
        font-size: 16px;
    }


    /* 精品 */
    .boutiqueList {
        overflow: hidden;
    }

    .boutiqueList>li {
        float: left;
        padding: 8px;

    }

    .boutiqueList>li div {
        overflow: hidden;
        width: 224px;
        height: 135px;
    }

    .boutiqueList>li div>a>img {
        position: relative;
        width: 100%;
        height: 100%;
        transition: 1s;
    }

    .boutiqueList>li div>a>img:hover {
        transform: scale(1.2, 1.2);
    }

    .boutiqueList>li>p:nth-of-type(1) {
        width: 200px;
        padding-top: 10px;
        font-weight: 500;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .boutiqueList>li>p:nth-of-type(2) {
        color: #888;
        font-weight: 500;
    }

    .boutiqueList>li>span {
        color: #ff4500;
        font-size: 16px;
    }

    .boutiqueList>li:hover {
        cursor: pointer;
    }

    .boutiqueList>li:hover>p:nth-of-type(1) {
        color: #00cf8c;

    }

    /* 折扣 */
    .discountList {
        overflow: hidden;
    }

    .discountList>li {
        float: left;
        padding: 8px;
        overflow: hidden;

    }

    .discountList>li div {
        overflow: hidden;
        width: 224px;
        height: 135px;
    }

    .discountList>li div>a>img {
        position: relative;
        width: 100%;
        height: 100%;
        transition: 1s;
    }

    .discountList>li div>a>img:hover {
        transform: scale(1.2, 1.2);
    }

    .discountList>li>p:nth-of-type(1) {
        width: 200px;
        padding-top: 10px;
        font-weight: 500;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .discountList>li>p:nth-of-type(2) {
        color: #888;
        font-weight: 500;
    }

    .discountList>li>span {
        color: #ff4500;
        font-size: 16px;
    }

    .discountList>li>span:nth-of-type(2) {
        color: #999;
        text-decoration: line-through;
        font-size: 12px;
    }

    .discountList>li:hover {
        cursor: pointer;
    }

    .discountList>li:hover>p:nth-of-type(1) {
        color: #00cf8c;

    }

    .discountList>li>p:nth-of-type(3) {
        float: right;
        color: #fa8c16;
        background: #fff7e6;
        border-color: #ffd591;
        height: 22px;
        margin-right: 8px;
        padding: 0 7px;
        font-size: 12px;
        line-height: 20px;
        white-space: nowrap;
    }
</style>

<body>
    <div id='app'>
        <temp9 :typecontent="{'type':'free','title':'免费课程'}"> <div>免费课程</div></temp9>
        <temp9 :typecontent="{'type':'boutique','title':'精品课程'}"> <div>精品课程</div></temp9>
        <temp9 :typecontent='{"type":"discount","title":"折扣课程"}'><div>折扣课程</div></temp9>
    </div>
    <template id="temp1">
        <div>
            <div class="title">
                <h2><slot></slot></h2>
            </div>
            <ul class="freeList">
                <li v-for="(item,index) in freeData" :key="item.courseId">
                    <div><a href="#"><img :src="item.bannerFileUrl" alt=""></a></div>
                    <p>{{item.courseSubtitle}}</p>
                    <p>共{{item.courseId}}节课 | {{item.participationsCount}}人报名</p>
                    <span>不免费</span>
                </li>
            </ul>
        </div>
    </template>

    <script>
        Vue.component("temp9", {
            template: "#temp1",
            props: {
                typecontent: {
                    type: Object,
                }
            },
            data() {
                return {
                    freeData: [],
                }
            },
            methods: {
                dataFunction(type) {
                    let http = "http://wkt.myhope365.com"
                    let obj = new URLSearchParams();
                    obj.append("type", type)
                    obj.append("pageNum", 1)
                    obj.append("pageSize", 10)
                    return axios.post(`${http}/weChat/applet/course/list/type`, obj)
                }
            },
            created() {
                console.log(typeof this.typecontent)
                this.dataFunction(this.typecontent.type).then(res => {
                    console.log(res);
                    this.freeData = res.data.rows;
                })
            }
        })
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
        })
    </script>
</body>

</html>